<template>
	<u-popup :show="show" round="24rpx" :closeOnClickOverlay="true" @close="close">
		<view class="yhqpopbox">
			<view class="headbox" >
				<view class="title">优惠劵</view>
					<view class="cell" v-if="checkedItem.isTuiJian">
						<view class="lbox" >
							已选中推荐优惠，可使用优惠券{{ keShiYong }}张，当前折扣
							<text style="color: #e54e4e">￥{{ checkedItem.money || checkedItem.jian || 0 }}</text>
						</view>
					</view>
					<view class="cellfalse" v-else-if="goods">
						<!-- <view class="lbox">优惠券</view> -->
					</view>
					<view class="cell" v-else>
						<view class="lbox">请选择优惠券</view>
						<button class="rbox" @click="tuijian">使用推荐优惠</button>
					</view>
			</view>
			<scroll-view scroll-y="true" :class="goods?'scroll-y001':'scroll-y002'">
				<view class="bodybox">
					<yhqlist :goods="goods" :needPay="needPay" ref="yhqlist" :list="yhqList" @getItem="getItem"></yhqlist>
				</view>
			</scroll-view>
			<footer-btn v-if="!goods" text="不使用优惠券" @submit="noYouHui"></footer-btn>
		</view>
	</u-popup>
</template>

<script>
import { mapState } from 'vuex';

export default {
	name: 'yhqpop',
	computed: {
		...mapState(['checkedItem']),
		keShiYong() {
			let arr = this.yhqList.filter((item) => item.if_lingqu).filter(Boolean);
			return this.yhqList.length;
		}
	},
	props: {
		needPay: {
			type: Number | String,
			default: 0
		},
		goods: {
			type: Boolean,
			default: false
		},
		show: {
			type: Boolean,
			default: false
		},
		yhqList: {
			type: Array,
			default: () => {
				return [];
			}
		},
		kylist: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	data() {
		return { list: [], kyids: [] };
	},
	mounted() {
		// this.init();
	},
	beforeDestroy() {},
	methods: {
		init() {
			// this.$http.getJson('users_myYhqList', { scene: 1 }).then((res) => {
			// 	const { code, data, message } = res;
			// 	if (code === 1) {
			// 		if(this.yhqlist.length > 0){
			// 			this.kyids = this.yhqlist.map(val=>{
			// 				if(val.hasOwnProperty('lingqu_id')){
			// 					return val.lingqu_id
			// 				}else{
			// 					return val.id
			// 				}
			// 			} ).filter(Boolean);
			// 		}
			// 		console.log(this.kyids);
			// 		this.$store.state.yhqList = data;
			// 	}
			// });
		},
		getItem(item) {
			this.$emit('getItem', item);
		},
		noYouHui() {
			this.$store.commit('clearCheck');
		},
		ifky(item) {
			if (item.money) {
				if (parseFloat(item.money) >= parseFloat(this.needPay)) {
					return true;
				}else{
					return false;
				}
			}
			if (item.jian) {
				if (parseFloat(item.jian) >= parseFloat(this.needPay)) {
					return true;
				}else{
					return false;
				}
			}
		},
		tuijian() {
			let arr = this.yhqList
				.map((item) => {
					if (parseFloat(this.needPay) >= parseFloat(item.man)) {
						if (!this.ifky(item)) return item;
					}
				})
				.filter(Boolean);
			this.$store.state.checkedItem = arr.reduce((max, current) => {
				if (current.money > max.money) {
					return current;
				} else {
					return max;
				}
			});
			this.$store.state.checkedItem.isTuiJian = true;
		},
		close() {
			this.$emit('close');
		}
	}
};
</script>

<style lang="less" scoped>
.yhqpopbox {
	height: 1020rpx;
	border-radius: 24rpx;
	background: #f5f7f9;
	.headbox {
		.title {
			background: #fff;
			border-radius: 24rpx 24rpx 0 0;
			padding: 22rpx;
			height: 88rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #000000;
		}
		.cell {
			.flex-between();
			height: 80rpx;
			padding: 0 32rpx;
			border: 1px solid #f3f4f8;
			border-left: none;
			border-right: none;
			background: #ffffff;
			.lbox {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
			.rbox {
				.flex-center();
				height: 48rpx;
				padding: 0 16rpx;
				margin: 0;
				background: #e54e4e;
				border-radius: 24rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
			}
		}
	}
	.scroll-y001{
		// height: calc(1020rpx - 80rpx -  90rpx);
		height: calc(1020rpx - 90rpx);
		.bodybox {
			padding: 24rpx;
		}
	}
	.scroll-y002 {
		height: calc(1020rpx - 80rpx - 164rpx - 90rpx);
		.bodybox {
			padding: 24rpx;
		}
	}
}
</style>
